<template>
	<view class="applyForRefund" v-if="lent.num">
		<view class="applyForRefund-top">
			<view class="DetailsShopTop">
				<view class="DetailsShopTopLeft">
					<image :src="lent.goods.img " mode="aspectFit"></image>
				</view>
				<view class="DetailsShopTopRight">
					<view>{{lent.goods.name}}</view>
					<view>序列号：{{lent.goods.goods_num}}</view>
					<view>x{{lent.num}}</view>
				</view>
			</view>
		</view>
		<view class="applyForRefund-cen">
			<view class="applyForRefund-cen-title">
				<text>退款方式</text>
				<text>原路返回</text>
			</view>
			<view class="applyForRefund-cen-title">
				<text>退款描述</text>
				<text></text>
			</view>
			<view class="applyForRefund-cen-text">
				<input placeholder="请填写您的退款原因，客服将第一时间处理.." placeholder-style="font-size: 24rpx;color: #999999;" type="text" v-model="desc" v-if="!ioS">
				<textarea placeholder="请填写您的退款原因，客服将第一时间处理.." placeholder-style="font-size: 24rpx;color: #999999;" maxlength="-1" v-model="desc" v-if="ioS"></textarea>
			</view>
			<view class="applyForRefund-cen-title">
				<text>退款原因 <text>（至少选一项）</text> </text>
				<text></text>
			</view>
			<view class="applyForRefund-cen-for" v-for="(item,key) in list" :key="key">
				<text>{{item.name}}</text>
				<text :class="item.iScolor?'colorbg':''" @click="getColor(item)"></text>
			</view>
		</view>
		<view class="DetailsFei">
			<view class="DetailsFeiTiele">
				申请退款金额明细
			</view>
			<view class="DetailsFeiFlex">
				<view>
					租赁费
				</view>
				<view>
					￥{{lent.price}}
				</view>
			</view>
			<view class="DetailsFeiFlex">
				<view>
					押金
				</view>
				<view>
					{{Number(dit)>=Number(lent.goods.dit)?'￥'+lent.goods.deposit:'免押金'}}
				</view>
			</view>
			<view class="DetailsFeiFlex colorRed">
				<view>
					退款合计
				</view>
				<view>
					￥{{Number(dit)>=Number(lent.goods.dit)?Number(lent.down_price)+Number(lent.goods.deposit):lent.down_price}}
				</view>
			</view>
		</view>
		<view class="applyForRefund-btn">
			<button @click="sub">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [

				],
				id: 1,
				lent: {
					goods: {
						dit: ''
					}
				},
				desc: '',
				dit: '',
				content: [],
				ioS: false,
			};
		},
		onLoad(e) {
			this.judgePlatForm()
			if (e.data) {
				this.init(e.data)
				this.id = e.data
			} else {
				this.init(213)
			}
		},
		methods: {
			//判断安卓还是iOS
			judgePlatForm() {
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					console.log('我是iOS')
					this.ioS = false
				} else if (platform == 'android') {
					this.ioS = true
					console.log('我是安卓')
				}
			},
			getColor(item) {
				this.list.map(value => {
					if (item.id == value.id) {
						item.iScolor = !item.iScolor
					}
					return value
				})
			},
			init(id) {
				this.$request("Order/FindOrder", {
					data: {
						id: id
					},
					isLoad: false
				}).then(res => {
					this.lent = res.result
				})
				this.$request("Order/OrderTuiList", {
					data: {

					},
					isLoad: false
				}).then(res => {
					this.list = res.result.map(item => {
						item.iScolor = false
						return item
					})
					// console.log(this.list)
				})
				this.$request("User/index", {
					data: {

					},
					isLoad: false
				}).then(res => {
					this.dit = res.result.dit
				})
			},
			sub() {
				let arr = []
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].iScolor) {
						arr.push(this.list[i].name)
					}
				}
				if (arr.length == 0) {
					console.log('数量', arr.length)
					this.gettoast("最少选择一项退款原因")
					return
				}
				this.$request("Order/OrderRefund", {
					data: {
						id: this.id,
						desc: this.desc,
						content: arr.join(','),
					},
					isLoad: false
				}).then(res => {
					this.getback()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.applyForRefund {}

	.applyForRefund-top {
		background-color: #fff;
		padding: 32rpx;
	}

	.DetailsShopTop {

		display: flex;
		align-items: center;

		.DetailsShopTopLeft {
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}

		.DetailsShopTopRight {
			margin-left: 32rpx;

			>view:nth-child(1) {
				font-size: 32rpx;
				font-weight: bold;
				color: #323233;
				margin-bottom: 24rpx;
			}

			>view:nth-child(2) {
				font-size: 24rpx;
				color: #323233;
				margin-bottom: 24rpx;
			}

			>view:nth-child(3) {
				font-size: 24rpx;
				color: #323233;
			}
		}
	}

	.DetailsFei {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 32rpx;

		.DetailsFeiTiele {
			font-size: 28rpx;
			font-weight: bold;
		}

		.DetailsFeiFlex {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view {
				font-size: 28rpx;
			}

			>view:last-child {
				font-weight: bold;
			}
		}
	}

	.applyForRefund-btn {
		margin: 20rpx 0;

		button {
			border-radius: 100rpx;
			margin: 0 auto;
			width: 686rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #F7BC1C;
			color: #323233;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.applyForRefund-cen {
		padding: 32rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.applyForRefund-cen-title {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;

			>text:first-child {
				font-size: 28rpx;
				color: #323233;
				font-weight: bold;

				>text {
					color: #999999;
				}
			}

			>text:last-child {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.applyForRefund-cen-text {

			input {
				border: 1rpx solid #E6E7EB;
				padding: 26rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				width: 630rpx;
			}

			textarea {
				border: 1rpx solid #E6E7EB;
				padding: 26rpx;
				border-radius: 8rpx;
				height: 184rpx;
				font-size: 28rpx;
			}
		}

		.applyForRefund-cen-for {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E7EB;
			padding: 32rpx 0;

			text:first-child {
				display: inline-block;
				width: 580rpx;
			}

			text:last-child {
				display: inline-block;
				width: 28rpx;
				height: 28rpx;
				border-radius: 100%;
				border: 1rpx solid #666666;
			}

			.colorbg {
				background-color: #F7BC1C;
				border: 0 !important;
			}
		}

		.applyForRefund-cen-for:last-child {
			border-bottom: none;
		}
	}
</style>
